<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="消费者姓名">
          <el-input v-model="searchForm.name" placeholder="消费者姓名"></el-input>
        </el-form-item>
        <el-form-item label="消费类型">
          <el-select v-model="searchForm.type" placeholder="消费类型">
            <el-option label="商品" value="1"></el-option>
            <el-option label="课程" value="2"></el-option>
            <el-option label="活动" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
            v-model="searchForm.date"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getOrderList">查询</el-button>
          <el-button type="primary" @click="resetForm">重置</el-button>
        </el-form-item>  
      </el-form>
    </el-card>

    <el-card class="box-card" style="height: 65vh;overflow-y: scroll;">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="userName" label="消费者姓名" width="180">
        </el-table-column>
        <el-table-column prop="type" label="消费类型">
          <template slot-scope="scope">
            {{ typeEnum[scope.row.type] }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="金额" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
        </el-table-column>
        <el-table-column prop="recFlag" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="goToDetail(scope.row.orderId)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="tableSize"
      @current-change="pagechange">
    </el-pagination>
    <el-dialog title="订单详情" :visible.sync="showorderDetail">
      <div class="cDetail">订单id:  {{ orderDetail.orderId }}</div>
      <div class="cDetail">消费者id: {{ orderDetail.userId }}</div>
      <div class="cDetail">消费者姓名: {{ orderDetail.userName }}</div>
      <div class="cDetail">订单类型: {{ typeEnum[orderDetail.type] }}</div>
      <div class="cDetail">订单状态: {{ orderDetail.status }}</div>
      <div class="cDetail">订单创建时间: {{ orderDetail.createTime }}</div>
      <div class="cDetail">订单完成时间: {{ orderDetail.finishTime }}</div>
      <div class="cDetail">物品名称: {{ orderDetail.objectName }}</div>
    </el-dialog>

  </div>
</template>

<script>
import api from "../network/home";

export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      editView:false,
      activityForm:{},
      orderDetail: {},
      showorderDetail: false,
      typeEnum: {
        1 :"商品",
        2 :"课程",
        3 :"活动",
        4 :"充值"
      },
      tableSize:0,
      pageNum:1,
    };
  },
  computed: {},
  methods: {
    pagechange(p){
      this.pageNum = p
      this.getOrderList()
    },
    getOrderList(){
      const { name, type, date } = this.searchForm;
      const [startTime, endTime] = date || []
      const params = {
        pageNum: this.pageNum,
        pageSize: 10,
        name,
        type,
        startTime,
        endTime,
      };
      api.getOrderList(params).then((res) => {
        this.tableData = res.data.data.records;
        this.tableSize = res.data.data.total

      });
    },
    changeFlag(id){
      const params = {
        userId: id
      };
      api.changeUserStatus(params).then(() => {
       this.getOrderList()
      });
    },
    resetForm(){
      this.searchForm = {}
      this.pageNum = 1
      this.getOrderList()
    },
    addActivity(){
      this.editView = true
      // api.addActivity()
    },
    
    onSubmit(){
      const { activityName, introduce, placeIds, hostName, date, highPrice,midPrice,lowPrice } = this.activityForm;
      const [startTime, endTime] = date || []
      const params = {
        startTime,
        endTime,
        activityName, introduce, placeIds, hostName, date, highPrice,midPrice,lowPrice
      };
      api.addActivity(params).then((res) => {
        console.log(res);
        this.editView = false
        this.getOrderList()
      });
    },
    cancel(){
      this.editView = false
    },
    goToDetail(id){
      api.orderDetail(id).then((res) => {
        this.showorderDetail = true
        this.orderDetail = res.data.data || {}
      });
    },
  },
  mounted(){
    this.getOrderList()
  }
};
</script>

<style lang="scss" scoped>
.box-card{
  margin: 20px;
}
.cDetail{
  height: 50px;
  font-size: 20px;
  margin-left: 50px;
}
.itemDetail{
  margin-left: 50px;
  font-size: 18px;
  border: 1px solid ;
  width: 33%;
}
</style>